<template>
  <div>
    <!-- 发现音乐 -->
    <div class="footer_wrap">
      <span @click="fn">推荐</span>
      <span @click="fun">排行榜</span>
      <span @click="fund">歌单</span>
    </div>
    <div class="top">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    fn() {
      this.$router.push({
        name: 'EEEE',
      })
    },
    fun() {
      this.$router.push({
        name: 'FFFF',
      })
    },
    fund() {
      this.$router.push({
        name: 'GGGG',
      })
    },
  },
}
</script>

<style scoped>
.footer_wrap {
  position: fixed;
  left: 0;
  top: 60px;
  display: flex;
  height: 30px;
  width: 100%;
  text-align: center;
  background-color: red;
  color: #ccc;
  justify-content: space-evenly;
  align-content: center;
}
.top {
  padding-top: 30px;
}
</style>
